<template>
	<view class="local-life">
		<gyd-navbar back-color="#fff" :title="title" :isBack="false"></gyd-navbar>

		<view class="local-content">
			<!-- <view class="search">
				<uni-search-bar v-model="keyword" placeholder="请输入关键字" cancel-button="" radius="32"
					@keydown.enter="keywordSearch"></uni-search-bar>
			</view> -->

			<template v-if="bannerList.length>0">
				<gyd-swiper :list="bannerList"></gyd-swiper>
			</template>

			<uni-grid class="card local-menu" :column="6" :showBorder="false" :square="false">
				<uni-grid-item class="card-item" @click="clickCategory(item.id)" v-for="(item,index) in storeCategory"
					:key="index">
					<image class="avatar" :src="item.logo" mode="aspectFill"></image>
					<text class="label u-line-1"
						:class="currentCategory == item.id ? 'cl_red' : ''">{{item.name}}</text>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="card merchant">
			<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickItem" styleType="text"
				:activeColor="themeColor.theme"></uni-segmented-control>
			<view class="merchant-list">
				<view class="merchant-item" v-for="(item,index) in storeList" :key="index" @click="goMerchant(item)">
					<view class="merchant-cover">
						<u-image :src="item.store_logo" width="220" height="160" border-radius="12"></u-image>
					</view>
					<view class="merchant-info">
						<view class="name">
							{{item.store_name}}
						</view>

						<view class="row">
							<text class="price">距离您:{{item.distance}}</text>
						</view>
						<view class="row">
							<text class="price">营业时间:{{item.business_hours_start}} - {{item.business_hours_end}}</text>
						</view>

						<view class="other">
							<text>{{item.store_adress}}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center; justify-content: center; align-items: center; margin-top: 30rpx;"
				v-if="storeList.length == 0">
				<text>暂无数据~</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '本地生活',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		keyword: '',
		longitude: '',
		latitude: '',
		bannerList: [],
		storeCategory: [],
		currentCategory: 0,
		currentTab: 0,
		tabs: ['全部商家', '推荐商家', '附近商家'],
		isMore: true,
		storeList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getLocation();
		getBanner();
		getCategory();
	}

	function getLocation() {
		util.getLocation();
		setTimeout(() => {
			state.longitude = cache.get('longitude', false) || '';
			state.latitude = cache.get('latitude', false) || '';
		}, 1000);
	}

	function getBanner() {
		request.get('content/banner', {
			position_id: 12
		}).then(res => {
			console.log('轮播图', res);
			state.bannerList = res.data;
		})
	}

	function getCategory() {
		request.get('store/getStroeClass').then(res => {
			console.log('店铺分类', res);
			let data = res.data;
			data.forEach(item => {
				state.storeCategory.push({
					id: item.id,
					name: item.name,
					logo: state.imgHost + item.logo,
				})
			})
			state.storeCategory.unshift({
				id: 0,
				name: '全部',
				logo: state.imgHost + '/static/images/order/dd02.png',
			})
			getStore();
		})
	}

	function getStore() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		let params = {
			longitude: state.longitude,
			latitude: state.latitude,
			keyword: state.keyword,
			category_id: state.currentCategory,
			type: state.currentTab,
			skip: state.storeList.length,
		};
		request.get('store/getNearbyStore', params).then(res => {
			console.log('附近商家', res);
		})
	}

	function keywordSearch() {
		console.log('关键字搜索', state.keyword);
		search();
	}

	function clickCategory(id) {
		console.log('选择分类', id);
		state.currentCategory = id;
		search();
	}

	function onClickItem(e) {
		console.log('切换Tab', e);
		state.currentTab = e.currentIndex;
		search();
	}

	function search() {
		state.isMore = true;
		state.storeList = [];
		getStore();
	}

	function goMerchant(data) {
		let url = "/merchantPages/merchant/merchant-info?id=" + data.id
		uni.navigateTo({
			url
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		keyword,
		longitude,
		latitude,
		bannerList,
		storeCategory,
		currentCategory,
		currentTab,
		tabs,
		isMore,
		storeList,
	} = toRefs(state);
</script>

<style lang="scss">
	.local-life {
		.local-content {
			padding: $m16 $m24;

			.search {
				background: #fff;
				padding: 24rpx 0;
				border-radius: 16rpx 16rpx 0 0;
			}
		}

		.card {
			overflow: hidden;
			background-color: $u-bg-reverse-color;
			margin-top: $m24;
			border-radius: $radius-12;

			&.local-menu {
				padding-bottom: $m16;

				.card-item {
					// height: 100rpx;
					// line-height: 100rpx;
					margin-top: 20rpx;

					image {
						display: block;
						margin: 0 auto;
						width: 50rpx;
						height: 50rpx;
					}

					.label {
						margin-top: $m8;
						text-align: center;
						font-size: $font-24;
						color: #000000;
					}

					.cl_red {
						color: #125cd7;
					}
				}
			}

			&.merchant {
				.merchant-list {
					padding: 0 $m24;

					.merchant-item {
						@include f-between;
						padding: $m16 0;
						border-bottom: 1px solid $u-border-color;

						&:last-child {
							border-bottom: none;
						}

						.merchant-cover {}

						.merchant-info {
							overflow: hidden;
							position: relative;
							flex: 1;
							height: 180rpx;
							margin-left: $m24;

							.name {
								font-size: $font-32;
								color: $u-main-color;
							}

							.row {
								display: flex;
								align-items: center;

								.rate {
									.label {
										margin-left: $m4;
										color: #ffc30f;
									}
								}

								.price {
									font-size: $font-24;
									color: #909399;
									padding-bottom: 10rpx;
								}
							}

							.other {
								position: absolute;
								bottom: 0;
								width: 100%;
								height: 50rpx;
								line-height: 30rpx;
								@include f-between;
								white-space: normal‌;
								text-overflow: ellipsis;

								text {
									font-size: $font-24;
									color: $u-tips-color;

								}
							}
						}
					}
				}
			}
		}
	}
</style>